import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Table, ConfigProvider } from 'antd'
import { ColumnsType } from 'antd/es/table';
import zhCN from 'antd/locale/zh_CN';
import enUS from 'antd/locale/en_US';
import csES from 'antd/locale/ca_ES';

export default function App() {
    let [language, setLanguage] = useState<string>('zhCN')
    const { t, i18n } = useTranslation(['app']);
    const columns: ColumnsType<any> = [
        {
            title: t('index')
        },
        {
            title: t('name')
        }
    ]
    return (
        <ConfigProvider locale={language === 'zhCN' ? zhCN : enUS}>
            <div>

                <p><button onClick={() => {
                    i18n.changeLanguage('zh')
                    setLanguage('zhCN');
                }}>中文</button></p>
                <p><button onClick={() => {
                    i18n.changeLanguage('en')
                    // 
                    setLanguage('enUS');
                }}>英文</button></p>

                <h3>{t('hello')}</h3>
                <p>{t('click')}</p>

                <Table
                    columns={columns}
                    pagination={{
                        current: 1,
                        pageSize: 3,
                        total: 50,
                        showQuickJumper: true,
                        showSizeChanger: true,
                        pageSizeOptions: [5, 10, 20]
                    }}
                />
            </div>
        </ConfigProvider>
    )
}
